<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>个人网站</title>
    <link rel="stylesheet" href="" integrity="" crossorigin="">
    <link rel="stylesheet" href="style.css">


    <style>
        #welcome {
            width: 200px;
            height: 200px;
            background: url(2.png);
            background-size: 200px 200px;
        }
        
        #img {
            width: 199px;
            height: 199px;
            border: 1px solid red;
        }
        
        body {
            background-color: rgb(187, 233, 235);
            background-size: 100%;
        }
    </style>


</head>

<body>

    <div class="header">
        <div class="logo">
            <img src="1.jpg" title="logo">
            <div class="b">
                <h5 id="sou">曹春山</h5>
            </div>
        </div>
        <div class="menu">
            <ul>
                <li><a href="#sou">首页</a>
                </li>
                <li><a href="#ren">认识我</a>
                </li>
                <li><a href="#ge">个人作品</a>
                </li>
                <li><a href="#lian">联系我</a>
                </li>

            </ul>
        </div>


    </div>


    <div calss="header1">
        <div class="pic"><img src="2.png" alt=""></div>

    </div>

    <div class="welcome">

        <h1 id="ge">个人作品</h1>
        <p>我的精彩时刻</p>
    </div>

    <div class="works pure-g">

        <a class="work pure-u-1-3" href="#">

            <div class="inner">
                <div class="top">
                    <img src="10.jpeg" max-width="400" max-height="300" alt="">
                </div>
                <div class="bottom">
                    <h3 class="work-title">插画剪纸作品</h3>
                    <span class="category">一个女人</span>
                </div>
            </div>
        </a>
        <a class="work pure-u-1-3" href="#">
            <div class="inner">
                <div class="top">
                    <img src="9.JPG" max-width="400px" max-height="300px" alt="">
                </div>
                <div class="bottom">
                    <h3 class="work-title">故事版手绘</h3>
                    <span class="category">长头发女人</span>
                </div>
            </div>
        </a>
        <a class="work pure-u-1-3" href="#">
            <div class="inner">
                <div class="top">
                    <img src="11.jpeg" alt="">
                </div>
                <div class="bottom">
                    <h3 class="work-title">色彩作品</h3>
                    <span class="category">一盆花</span>
                </div>
            </div>
        </a>
        <a class="work pure-u-1-3" href="#">
            <div class="inner">
                <div class="top">
                    <img src="12.jpg" alt="">
                </div>
                <div class="bottom">
                    <h3 class="work-title">素描作品</h3>
                    <span class="category">一个男人</span>
                </div>
            </div>
        </a>
        <a class="work pure-u-1-3" href="#">
            <div class="inner">
                <div class="top">
                    <img src="13.jpg" alt="">
                </div>
                <div class="bottom">
                    <h3 class="work-title">图标设计</h3>
                    <span class="category">软件图标</span>
                </div>
            </div>
        </a>
        <a class="work pure-u-1-3" href="#">
            <div class="inner">
                <div class="top">
                    <img src="14.jpg" alt="">
                </div>
                <div class="bottom">
                    <h3 class="work-title">版式排版</h3>
                    <span class="category">花的种类欣赏画册</span>
                </div>
            </div>
        </a>
    </div>


    <!-- <div class="about1">
        <div class="about1-left">
            <img src="https://via.placeholder.com/500x300.png" alt="">
        </div>
        <div class="about1-right">
            <h1>你的名字</h1>
            <p>介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事介绍关于你的故事</p>
        </div>
    </div> -->

    <div class="about">
        <div class="left">
            <img src="8.png" width="300" height="300" alt="">
        </div>

        <div class="right">
            <h1 id="ren">曹春山</h1>
            <p>我叫曹春山，我来自北京密云我是一个阳光的大男孩， 我乐观积极向上，我喜欢品尝美食，让我感觉非常美 味的佳肴我一般都会品尝一次！成都的美食数不胜数 让我流连忘返，所以成就了我现在的吨位！我的故事 很少别看我生长在北京，但是我相对于是个宅男，我 时常喜欢宅在家里！看看小说！有时也外出奔跑我喜 欢那种感觉。没错这就是我一个没有多少故事的男孩！</p>
        </div>
    </div>

    <div class="about1">
        <div class="left">
            <ul>
                <li>我的爱好比较广泛</li>
                <li>我有空喜欢打打羽毛球，因为打羽毛球会活动我的身体，促进血液循环.</li>
                <li>一但有长时间的空闲的话我都回去钓鱼的，钓鱼的兴趣有时候会压过别的兴趣，因为钓鱼的时候会静下心，会专心的干一件事，我这个人比较喜欢一个人安静的待着，而钓鱼正好对应了我的脾气！钓鱼也不是随便的也是有很多的技巧和知识的.</li>
                <li>有0时候晚上吃完饭我喜欢出去溜溜弯，因为夏天家里闷热，出去走走是最好的选择，也正好锻炼身体.</li>
                <li>我也喜欢宅在家里看小说，有时候碰到喜欢看的小说一天都可以闷在家里看小说！</li>
                <li>我也比较喜欢打游戏，这可能是很多男孩子喜欢的，三五个人约在一起打打游戏.</li>


            </ul>
        </div>
        <div class="right">
            <img src="7.JPG" width="400" height="400" alt="">
        </div>
    </div>


    <div class="footer">
        <div class="top">
            <h3 id="lian">联系我</h3>
            <div class="info pure-g">
                <div class="box pure-u-1-4">
                    <img src="3.JPG" width="30" height="30" alt="">
                    <p>1542541642</p>
                </div>
                <div class="box pure-u-1-4">
                    <img src="4.JPG" width="30" height="30" alt="">
                    <p>ccs2114</p>
                </div>
                <div class="box pure-u-1-4">
                    <img src="5.JPG" width="30" height="30" alt="">
                    <p>15810285871</p>
                </div>
                <div class="box pure-u-1-4">
                    <img src="6.jpg" width="30" height="30" alt="">
                    <p>1542541642@qq.com</p>
                </div>
            </div>
        </div>

        <div class="bottom">
            Copyright 2020 All Rights Reserved @ 曹春山
        </div>
    </div>
</body>

</html>